<!-- 周边商城列表组件 -->

<template>
	<div class="tc-title">
		<h3>{{tagType}}</h3>
		<ul>
			<li v-for="(item,path,index) in label" :key="index">
				<router-link :to="{ path: item.path }" style="width: 100%;">
					<span v-text="item.title"></span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			label: {
				type: Array,
			},
			tagType:{
				type:String
			}
		},

		data() {
			return {

			};
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if (value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";



	.tc-title {
		h3 {
			font-size: 17px;
			color: @name-h3-color;
			text-align: left;
			font-weight: bold;
			font-family: PingFang-SC-Bold;
			position: relative;
			text-indent: 10px;

			&:after {
				position: absolute;
				content: '';
				width: 4px;
				height: 15px;
				border-radius: 2px;
				background: @base-blue-color;
				left: 0;
				right: 0;
				top: 1px;
				margin-left: 0;
				margin-right: auto;
			}


		}

		ul {
			margin-top: 25px;
			width: calc(100% - 30px);
			padding: 0 15px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			li {
				color: @name-h3-color;
				width: 130px;
				height: 40px;
				border-radius: 3px;
				display: inline-block;
				text-align: center;
				line-height: 40px;
				margin-bottom: 20px;
				background: rgba(245, 245, 245, 1);

				&:nth-child(even) {

					margin-left: 10px;
				}

				&:nth-child(odd) {

					margin-right: 10px;
				}
			}
		}

	}
</style>
